﻿<style type="text/css">
    /*聊天页面头部*/
    body{background:#efeff3 }
    .mv-chat .chat-top{height: 40px;background:#39383d;position: relative; }
    .mv-chat .chat-top h2{color: #fff;text-align: center;font-size: 16px;line-height: 40px;}
    .mv-chat .chat-top  a {color: #fff}
    .mv-chat .chat-top  .cht-left{position: absolute;left: 10px;top: 8px;}
    .mv-chat .chat-top  .cht-left span{color: #fff;position: relative;top: -1px;left: 5px;}
    .mv-chat .chat-top  .cht-right{position: absolute;right: 15px;top: 8px;}
    .mv-chat .chat-top  a i{font-size: 20px;}

    /*通讯录*/
    .mv-chat .mail-search{background: #fff;margin: 15px;border-radius: 5px;}
    .mv-chat .mail-search .search-icon1 {padding-left: 10px; padding-right: 5px; }
    .mv-chat .mail-search.search-icon1 i {font-size: 18px; position: relative; top: 1px; }
    .mv-chat .mail-search input {height: 30px; border: none; background: none; font-size: 15px; width: 80%; }
    .mv-chat .mail-class{background: #fff;margin-bottom: 15px;}
    .mv-chat .mail-class .mail-a{width: 40px;height: 40px;text-align: center;line-height: 40px;}
    .mv-chat .mail-class .mail-a i{color: #fff;font-size: 20px;font-weight: 700;}
    .mv-chat .mail-class  ul li a{border-bottom: 1px solid #f2f2f2;display:-webkit-box;padding: 10px 15px}
    .mv-chat .mail-class  ul li a p{line-height: 40px;margin-left:15px;}
    .mv-chat .mail-class  ul li a img{display: inline-block;width: 40px;height: 40px;}
</style>

<div class="mv-chat">
    <div class="mail-list">
        <div class="mail-search">
            <a class="search-icon1"><i class="iconfont icon-31sousuo"></i></a>
            <input type="text" placeholder="搜索" v-on:keypress="search($event)">
        </div>
        <div class="mail-class">
            <ul>
                <li v-on:click="detail(data.id)" v-for="data in bag.datas" v-cloak="">
                    <a>
                        <div class="mail-a">
                            <img :src="data.icon">
                        </div>
                        <p v-text="data.username + '('+data.id+')'">-</p>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div style="text-align:center;margin-top:0.5em;" v-if="bag.dataend == false" v-cloak="">
    <a v-on:click="more" v-text="morename" style="color:#888;">-</a>
</div>
<div style="text-align:center;margin-top:0.5em;" v-if="bag.dataend == true" v-cloak="">
    <a style="color:#aaa;">已显示所有</a>
</div>
<div style="height:60px;"></div>

<script type="text/javascript">
    var pagedata = {
        request: {
            method: "VIEW_FRIEND_SEARCHLISTS",
            page: 0,
            username: mview.view.chlid.param.username
        },
        screen: {
            header_display: true,
            footer_choose: "friend",
            header_title_name: "查询结果",
            header_exit_name: "返回",
            header_exit_click: function () {
                mview.view.load('/views/module/friend/messagelists.html');
            }
        },
        data: {
            morename: "查看更多"
        },
        methods: {
            detail: function (id) {
                mview.view.load('/views/module/friend/detail.html', {
                    id: id
                });
            },
            search: function (event) {
                if (event.keyCode == 13) {
                    var value = event.target.value;
                    pagedata.request.username = value;
                    pagedata.request.page = 0;
                    pagedata.reload();
                }
            },
            //加载更多
            more: function () {
                pagedata.request.page += 1;
                mview.socket.send({
                    data: {
                        method: "VIEW_FRIEND_RELATIONLISTS",
                        page: pagedata.request.page,
                        username: pagedata.request.username,
                        part: 1
                    },
                    success: function (json) {
                        if (json.Code == 0 && json.Data.datas.length > 0) {
                            for (var i in json.Data.datas) {
                                var data = json.Data.datas[i];
                                mview.vue.stage.$data.bag.dataend = json.Data.dataend;
                                mview.vue.stage.$data.bag.datas.push(data);
                            }
                        }
                    }
                });
            }
        }
    }
    mview.view.chlid.init(pagedata);
</script>